<template>
  <div class="main_entrance_box">
    <div class="enterance_box">
      <div class="menu_row_1"><img src="../assets/img/menu.png"></img>Cesium相关</div>
      <div style="display: flex;width: 1400px;">
        <div class="single_pic_box"  v-for="item in cesiumMenuList"  :key="item.code"  @click="changeRouter(item.code)">
          <img src="../assets/img/sanwei_icon.png"/>
          <span>{{ item.name }}</span>
        </div>
      </div>
      <div class="menu_row_1"><img src="../assets/img/menu.png"></img>Openlayer相关</div>
      <div style="display: flex;width: 1400px;">
        <div class="single_pic_box"  v-for="item in openlayerMenuList"  :key="item.code"  @click="changeRouter(item.code)">
          <img src="../assets/img/erwei_icon.png"/>
          <span>{{ item.name }}</span>
        </div>
      </div>

      <div class="menu_row_1"><img src="../assets/img/menu.png"></img>室内地图</div>
      <div style="display: flex;width: 1400px;">
        <div class="single_pic_box"  v-for="item in roomMapMenuList"  :key="item.code"  @click="changeRouter(item.code)">
          <img src="../assets/img/room_icon.png"/>
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {nextTick, onMounted, ref} from 'vue'
import {useRouter} from "vue-router";

const cesiumMenuList = ref([
  {"name": "☆事例", "code": "MainPage"},
  {"name": "☆模型控制", "code": "modelControl"},
  {"name": "☆分层分户（建筑模型）", "code": "houseFcFh"},
  {"name": "☆材质", "code": "cesiumMaterial"}
])
const openlayerMenuList = ref([
  {"name": "☆事例", "code": "OpenlayerPage"}
])

const roomMapMenuList=ref([
  {"name": "☆真趣", "code": "zhenqu"},
  {"name": "☆易景", "code": "esmap"},
])

const router = useRouter();
const list = ref({
  "MainPage": {path: "/MainPage"},
  "OpenlayerPage": {path: "/OpenlayerPage"},
  "modelControl": {path: "/modelControl"},
  "tableControlMain": {path: "/tableControlMain"},
  "babylonPage": {path: "/babylonPage"},
  "houseFcFh": {path: "/houseFcFh"},
  "cesiumMaterial": {path: "/cesiumMaterial"}
})
const changeRouter = (type: any) => {
  if(type==="zhenqu"){
     window.open('http://101.37.28.178:8888/#%E4%B8%8B%E8%BD%BDjoysuch-map-sdk');
  }else if(type==="esmap"){
     window.open('https://www.esmap.cn/onlinedev/content/editor/index/index.html#pid=4&id=5');
  }else{
    router.push(list.value[type]['path'])
  }
}

onMounted(() => {nextTick(() => {})})
</script>

<style lang="scss" scoped>
.main_entrance_box {
  width: 100vw;
  height: 100vh;
  background-color: #000000;

  .enterance_box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .menu_row_1 {
      display: flex;
      align-items: center;
      margin-top: 20px;
      background-color: #4f99ff;
      height: 60px;
      width: 1920px;
      line-height: 60px;
      color: #ffffff;
      font-size: 28px;

      img {
        width: 32px;
        height: 32px;
        margin-left: 20px;
      }
    }

    .single_pic_box {
       display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 300px;
      height: 300px;
      border: 1px solid #4f99ff;
      border-radius: 10px;
      margin-right: 60px;
      margin-top: 20px;
      img{
        width: 180px;
        height: 180px;
      }
       span{
         margin-top: 40px;
         font-size: 20px;
         color: #ffffff;
       }
    }
  }
}

</style>
